<template>
	<view class="zy-column-full">
		<scroll-view class="zy-scroll" scroll-y style="padding-bottom: 120rpx;">
			<!-- 头部 -->
			<view class="wode">
				<view style="margin:40rpx 38rpx;display:flex;align-items:center;" v-if="Object.keys(userInfo).length">
					<view class="head" @click="navTo('/pages/edit/edit')">
						<u-image :src="userInfo.avatar" mode="" width="110rpx" height="110rpx" shape="circle">
							<u-image slot="error" :show-loading="false" class="list-avatar"
								src="@/static/image/home/avatar.png" width="110rpx" height="110rpx" />
						</u-image>
						<u-image :src="`../../static/wode/LV${userInfo.level}.png`" mode=""
							style="margin-top: -24rpx;margin-left: 8rpx;" width="95rpx" height="39rpx">
							<u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/wode/LV1.png"
								width="95rpx" height="39rpx" />
						</u-image>
					</view>
					<view class="name" @click="navTo('/pages/edit/edit')">
						<view class="player">
							{{userInfo.nickname}}
						</view>
						<u-image src="../../static/wode/edit.png" mode=""
							style="width: 27rpx;height: 26rpx;margin-left: 14rpx; "></u-image>
					</view>
					<view class="service" style="margin-left:auto;" @click="toWindow(systemInfo.service_url)"
						v-if="systemInfo.service_url">
						<image src="../../static/wode/service.png" mode="" style="width: 98rpx;height: 98rpx;"></image>
					</view>
				</view>
				<view style="margin:40rpx 38rpx;display:flex;align-items:center;" v-else>
					<view class="head" @click="navTo('/pages/login/login')">
						<u-image src="../../static/wode/morentouxiang.png" mode="" style="width: 110rpx;height: 110rpx;"
							shape="circle"></u-image>
					</view>
					<view class="name" @click="navTo('/pages/login/login')">
						<view class="login">
							{{$t("wode.login")}}
						</view>
					</view>
					<view class="service" style="margin-left:auto;" @click="toWindow(systemInfo.service_url)"
						v-if="systemInfo.service_url">
						<image src="../../static/wode/service.png" mode="" style="width: 98rpx;height: 98rpx;"></image>
					</view>
				</view>
				<view class="info" @click="navTo('/pages/funding/funding')" v-if="Object.keys(userInfo).length">
					<view class="detail" style="margin:0 20rpx;border-bottom:1rpx solid #ECECEC;"
						v-if="Object.keys(userInfo).length">
						<view class="balance" style="border:none;">
							<view class="count" style="font-size:50rpx;">
								{{$currency}}{{userInfo.money || 0}}
							</view>
							<view class="font">
								{{$t("wode.balance")}}
							</view>
						</view>
					</view>
					<view class="detail" v-if="Object.keys(userInfo).length">

						<view class="today" style="border:none;">
							<view class="count">
								{{$currency}}{{userInfo.today_earning || 0}}
							</view>
							<view class="font">
								{{$t("wode.today")}}
							</view>
						</view>
						<view class="revenue">
							<view class="count">
								{{$currency}}{{userInfo.total_earning || 0}}
							</view>
							<view class="font">
								{{$t("wode.total")}}
							</view>
						</view>
					</view>
				</view>
			</view>
			

			<view class="zy-ph-lg">
				<!-- Top-up和Withdrawal -->
				<view class="select" v-if="showTopup">
					<view class="top-up" @click="navTo('/pages/pay/pay')">
						<u-image src="/static/wode/recharge.png" mode=""
							style="width: 48rpx;height: 39rpx; margin: 30rpx auto 15rpx;"></u-image>
						<view class="up"> {{$t("wode.top")}} </view>
					</view>
					<view class="withdraw" @click="navTo('/pages/withdraw/takecrash')">
						<u-image src="/static/wode/tackcrash.png" mode=""
							style="width: 48rpx;height: 39rpx;margin: 30rpx auto 15rpx; "></u-image>
						<view class="up"> {{$t("wode.with")}} </view>
					</view>
				</view>
				
				<!-- warehouse开始到aboutus -->
				<mine-cell-item class="zy-mt" icon="/static/wode/warehouse.png" :label="$t(`wode.house`)"
					@click="navTo('../warehouse/warehouse')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/order.png" :label="$t(`wode.my`)"
					@click="navTo('../order/order')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/cash.png" :label="$t(`wode.fun`)"
					@click="navTo('../funding/funding')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/adress.png" :label="$t(`wode.add`)"
					@click="navTo('../Addressmanagement/Addressmanagement')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/bankcount.png" :label="$t(`wode.bank`)"
					@click="navTo('../bank/bank')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/invite.png" :label="$t(`wode.invite`)"
					@click="navTo('../team/invite')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/vip.png" :label="$t(`new.membership`)"
					@click="navTo('../member/member')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/set.png" :label="$t(`wode.set`)"
					@click="navTo('../Myevaluation/Myevaluation')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/reduce.png" :label="$t(`wode.introdution`)"
					@click="navTo('../home/help')"></mine-cell-item>
				<mine-cell-item class="zy-mt" icon="/static/wode/about.png" :label="$t(`wode.about`)"
					@click="navTo('../wode/aboutus')"></mine-cell-item>
			</view>
		</scroll-view>


		<u-mask :show="levelupShow" :zoom="false" class="flex-mask">
			<view class="nogoods-box">
				<view style="height:495rpx;width: 100%;">
					<view style="color:#FFF;font-size:32rpx;padding:36rpx 0;margin:0 45rpx;">
						<view style="height:29rpx;line-height:29rpx;flex:1;padding-left:29rpx;font-size:36rpx;">
							{{$t('new.congrat')}}</view>
					</view>
					<view class="u-flex u-row-center" style="color: #FFF;font-size: 40rpx;margin-top: 40rpx;">
						{{levelupInfo.old_level_name}}
						<image src="@/static/image/home/level_arrow.png"
							style="width: 75rpx;height: 28rpx;margin:0 30rpx;" mode="" />
						{{levelupInfo.new_level_name}}
					</view>
					<view
						style="padding: 30rpx 25rpx;display:flex;flex-direction:column;justify-content: space-between;color:#C1C3D0;font-size: 30rpx;background:url(../../static/image/home/item_bg.png) no-repeat;background-size: 630rpx 208rpx;width:630rpx;height:208rpx;margin:auto;margin-top: 37rpx;">
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('new.dailyincome')}}</view>
							<view style="flex:1;">{{$currency + levelupInfo.old_daliy_income}}</view>
							<image src="@/static/image/home/item_arrow.png"
								style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{$currency + levelupInfo.new_daliy_income}}</view>
						</view>
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('member.ratelabel')}}</view>
							<view style="flex:1;">{{levelupInfo.old_level_rate}}</view>
							<image src="@/static/image/home/item_arrow.png"
								style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{levelupInfo.new_level_rate}}</view>
						</view>
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('new.createagroup')}}</view>
							<view style="flex:1;">{{levelupInfo.old_open_group_num}}</view>
							<image src="@/static/image/home/item_arrow.png"
								style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{levelupInfo.new_open_group_num}}</view>
						</view>
					</view>
				</view>
				<view class="inside">
					<view class="u-flex u-row-center" style="margin-bottom: 10rpx;">
						<image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;"
							mode="" />
						<view style="margin: 0 15rpx;color:#878D9C;font-size:34rpx;">{{$t('new.recommendpro')}}</view>
						<image src="@/static/image/goods/purchase_title_left.png"
							style="width:23rpx;height:21rpx;transform: rotateY(180deg);--webkit-transform:rotateY(180deg);"
							mode="" />
					</view>
					<view class="u-flex u-row-between" style="margin-top: 40rpx;"
						v-if="levelupInfo.goodlist && levelupInfo.goodlist.list">
						<view class="item" v-for="(item, index) in levelupInfo.goodlist.list" v-if="index < 2"
							:key="index" @click="navTo('../goods/good', {id: item.id,categoryid: upgrade.goodlist.id})">
							<view class="item-show">
								<image :src="item.cover_image" mode=""></image>
							</view>
							<view class="header-price">
								<image src="@/static/image/home/angle_icon.png" style="width:18rpx; height:16rpx;"
									mode="" />
								<view>
									+{{$currency}}{{item.rewards}}{{$t('home.perday')}}
								</view>
							</view>
							<view class="item-text">
								<view class="item-name u-line-1" style="font-size:24rpx;word-break:break-word;">
									{{item?item.name:''}}</view>
								<view class="item-count">
									{{ $currency }}{{ item.price }}
								</view>
								<view class="remain_bg">
									<image src="@/static/image/home/person_icon.png"
										style="width: 18rpx;height:17rpx;margin-right:11rpx;" mode="" />
									<view>{{ $t('home.persongroup', {num:item?item.group_buy_num:''}) }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;"
				src="@/static/image/icon_delete_tou.png" mode="aspectFit" @click="levelupShow = false"></u-image>
		</u-mask>
		<userlog :showPopup="showLogin"></userlog>
		<tabbar page="/pages/wode/wode"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: false,
				showLogin: false,
				showTopup: true,

				levelupInfo: {},
				levelupShow: false,
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			if (this.platform == 'ios' && (this.systemInfo.is_audited == undefined || this.systemInfo.is_audited == '0')) {
				this.showTopup = false;
			}
			// #endif
			if (uni.getStorageSync('oned_token')) {
				this.$store.dispatch('getUserInfo')
			}
		},
		watch: {
			'$store.getters.upgrade': {
				handler(newValue) {
					console.log(newValue);
					if (Object.keys(this.$store.getters.userInfo).length == 0) {
						return;
					}
					if (Object.keys(newValue).length > 0) {
						this.levelupShow = true;
						this.levelupInfo = newValue;
						setTimeout(() => {
							this.$store.commit('SET_USER_UPGRADE', JSON.stringify({}))
							uni.setStorageSync('upgrade', JSON.stringify({}))
						}, 2000);
					}
				},
				immediate: true
			},
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {}
			},
			systemInfo() {
				return this.$store.getters.systemInfo || {}
			},
			platform() {
				return this.$store.getters.platform || ''
			}
		},
		methods: {
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						if (i == 'url') {
							param += `${i}=${encodeURIComponent(data[i])}&`
						} else {
							param += `${i}=${data[i]}&`
						}
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
			async toWindow(val) {
				const item = val;
				// type 1内链 2外链 3 调起whatsapp
				if (item.indexOf('http') > -1) {
					// #ifdef APP-PLUS
					this.navTo('/pages/home/wbv', {
						url: encodeURIComponent(item)
					})
					// #endif
					// #ifndef APP-PLUS
					if (item.indexOf('t.me') > -1 || item.indexOf('wa.me') > -1) {
						window.open(item)
					} else {
						this.navTo('/pages/home/wbv', {
							url: encodeURIComponent(item)
						})
					}
					// #endif
				} else {
					uni.navigateTo({
						url: item
					})
				}
			},
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss">
	// .main {
	// 	padding-bottom: 120rpx;
	// }

	.wode {
		padding-top: var(--status-bar-height);
		// background: linear-gradient(0deg, #FF6D1B 0%, #FF8E20 100%);
		background: linear-gradient(0deg, #FF6D1B 0%, #E6201C 100%);
		background-size: 750rpx 320rpx;
		background-repeat: no-repeat;
		overflow: hidden;

		.info {
			overflow: hidden;
			position: relative;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 30rpx 30rpx 0;
			padding-bottom: 20rpx;

			.service {
				position: absolute;
				left: 0;
				margin-right: 5rpx;
			}

			.setting {
				position: absolute;
				border-radius: 50%;
				right: 15rpx;
				top: 15rpx;
			}
		}

		.head {
			height: 110rpx;
			width: 110rpx;
		}

		.name {
			display: flex;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #fff;
			justify-content: center;

			.player {
				margin-left: 41rpx;
				line-height: 28rpx;
			}

			.login {
				margin-left: 41rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #fff;
				line-height: 32rpx;
			}
		}

		.detail {
			display: flex;
			padding: 34rpx;

			text-align: center;

			.balance,
			.today,
			.revenue {
				flex: 1;
				border-left: 2rpx solid #ECECEC;

				.count {
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi; //rubick;
					font-weight: 400;
					color: #0F0F0E;
					line-height: 36rpx;
				}

				.font {
					margin-top: 22rpx;
					font-size: 24rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA;
					line-height: 24rpx;
				}

			}
		}
	}

	.select {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding-top: 30rpx;

		.top-up {
			width: 335rpx;
			height: 146rpx;
			background-image: url(../../static/wode/rechargebgi.png);
			background-size: 100%;
		}

		.withdraw {
			width: 335rpx;
			height: 146rpx;
			background-image: url(../../static/wode/takecrashbgi.png);
			background-size: 100%;
		}
	}

	.up {
		font-size: 36rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	.used {
		overflow: hidden;
		width: 690rpx;
		background: #FFFFFF;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
		margin: 0 30rpx 30rpx 30rpx;

		.function {
			.yuan1 {
				margin-top: 20rpx;
				margin-left: 46rpx;
				width: 16rpx;
				height: 16rpx;
				background: $u-type-primary;
				border-radius: 50%;
			}

			.function1 {
				display: flex;

				.yuan2 {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
					background: $u-type-primary;
					border-radius: 50%;
				}

				.function2 {
					font-size: 32rpx;
					font-family: Rubik;
					font-weight: 500;
					color: #0F0F0E;
					margin-top: -12rpx;
					margin-left: -6rpx;
				}
			}
		}
	}

	.type {
		// margin-top: 43rpx;
		display: flex;
		flex-wrap: wrap;

		.commonly {
			margin-top: 43rpx;
			width: 172rpx;
			font-size: 22rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			text-align: center;
			line-height: 22rpx;
		}

	}

	.platform {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 30rpx;
		overflow: hidden;

		.is {
			.yuan1 {
				margin-top: 20rpx;
				margin-left: 46rpx;
				width: 16rpx;
				height: 16rpx;
				background: $u-type-primary;
				border-radius: 50%;
			}

			.is1 {
				display: flex;

				.yuan2 {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
					background: $u-type-primary;
					border-radius: 50%;
				}

				.is2 {
					font-size: 32rpx;
					font-family: Rubik;
					font-weight: 500;
					color: #0F0F0E;
					margin-top: -12rpx;
					margin-left: -6rpx;
				}
			}
		}
	}

	.introduce {
		padding: 7rpx 40rpx 0;

		.types {
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #ECECEC;
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 28rpx;
			padding: 40rpx 0;

			.text {
				flex: 1;
				text-align: end;
			}
		}
	}

	.nogoods-box {
		overflow: hidden;
		margin: 0 auto;
		width: 670rpx;
		background-image: linear-gradient(0deg, #272733 28.999999999999996%, #494E60 100%);
		background-repeat: no-repeat;
		background-size: 670rpx 495rpx;
		background-color: #FFF;
		min-height: 495rpx;
		border-radius: 20rpx;
		text-align: center;

		.inside {
			margin: auto;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			width: 610rpx;
			padding: 40rpx 30rpx;

			.label {
				color: #65676B;
				font-size: 32rpx;
			}

			.go-btn {
				height: 60rpx;
				width: 160rpx;
			}
		}

		.header-price {
			font-weight: 500;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FC3E32;
			font-size: 32rpx;
		}

		.item {
			position: relative;
			border-radius: 15rpx;
			background-color: #fff;
			border: 1rpx solid #C17C1C;
			width: 250rpx;
			margin: 0 10rpx;
			opacity: 1;

			.item-show {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 190rpx;
				position: relative;
				// background-color: #fff;

				.item-show-prize {
					white-space: nowrap;
					width: 184rpx;
					height: 42rpx;
					opacity: 1;
					background: #90b9ff;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					line-height: 42rpx;
					font-size: 24rpx;
					font-family: Roboto, Roboto-Medium;
					font-weight: 500;
					text-align: LEFT;
					color: #ffffff;
					text-align: center;
					position: absolute;
					bottom: -2rpx;
					z-index: 970;
				}

				image {
					z-index: 99;
					// width: 160rpx;
					// height: 160rpx;
					max-width: 250rpx;
					max-height: 190rpx;
					// margin-top: -62rpx;
					opacity: 1;
					border-radius: 15rpx 15rpx 0 0;
					// box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(142, 164, 212, 0.50);
				}
			}

			.item-text {
				display: flex;
				flex-direction: column;
				width: 100%;
				// height: 106rpx;
				padding: 12rpx 0 12rpx 16rpx;
				border-top: none;
				border-radius: 0 0 20rpx 20rpx;

				.item-name {
					width: 100%;
					font-size: 28rpx;
					font-family: Roboto, Roboto-Medium;
					font-weight: bold;
					margin-top: 6rpx;
				}

				.item-num {
					font-size: 28rpx;
					color: #FC3E32;
					font-family: DIN, DIN-Regular;
					font-weight: 400;
				}

				.item-count {
					margin-top: 6rpx;
					font-size: 32rpx;
					font-family: DIN, DIN-Medium;
					font-weight: bold;
					// color: #b9b9b9;
					color: #FC3E32;
				}

				.remain_bg {
					display: flex;
					font-size: 24rpx;
					color: #AAA;
					height: 34rpx;
					line-height: 36rpx;
					// background: url(@/static/image/home/remain_bg.png) no-repeat;
					background-size: 100% 100%;
					align-items: center;
				}

				.item-line {
					width: 100%;
					margin: -8rpx 20rpx;
				}
			}
		}
	}

	.flex-mask {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>